<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="add" method="post">
    <table border="1">
        <tr>
            <td colspan="2"><h1>添加出行计划信息</h1></td>
        </tr>
        <tr>
            <td>出差人员(*)</td>
            <td><input type="text" name="userName" id="user_name"></td>
        </tr>
        <tr>
            <td>出差人职位(*)</td>
            <td><input type="text" name="duty" id="duty"></td>
        </tr>
        <tr>
            <td>出行方式(*)</td>
            <td>
                <select name="tripModeId" id="trip_mode_id">
                    <option value="0">——请选择——</option>
                    <th:block th:each="tripMode : ${tripModes}">
                        <option th:name="tripModeId" th:value="${tripMode.id}" th:text="${tripMode.name}"></option>
                    </th:block>
                </select>
            </td>
        </tr>
        <tr>
            <td>出行日期(*)</td>
            <td><input type="text" name="departTime" id="depart_time"></td>
        </tr>
        <tr>
            <td><input type="submit" th:value="添加"></td>
        </tr>
    </table>
</form>

<script src="/js/jquery.js"></script>
<script>
    $(function () {
        $('form').submit(function () {
            let user_name = $('#user_name').val()
            let duty = $('#duty').val()
            let trip_mode_id = $('#trip_mode_id').val()
            let depart_time = $('#depart_time').val()

            if (user_name == '' || duty == '' || trip_mode_id == 0 || depart_time == '') {
                alert("请填写完整的出行计划信息！")
                return false
            }

        })
    })
</script>


</body>
</html>
